import React from "react";
import "../css/main.less"
import {TabBar} from "antd-mobile";
class App extends React.Component{

    constructor(props) {
        super(props);

        this.state = {
            activeKey: this.getActiveKey()
        }
    }

    getActiveKey(){
        if (window.location.pathname === "/") {
            return "";
        } else if (window.location.pathname === "/category") {
            return "category";
        } else if (window.location.pathname === "/shoppingcar") {
            return "shoppingcar";
        } else {
            return "mine"
        }
    }

    render() {
        return (
            <div className={"bottomApp"}>
                <TabBar activeKey={this.state.activeKey} onChange={
                    key => {
                        this.props.history.replace("/"+key);
                    }
                }>
                    <TabBar.Item key={""} title={"首页"} icon={<img src={require("../asset/tabber/4."+(window.location.pathname === "/" ? "1" : "0")+".jpg").default} alt=""/>}/>
                    <TabBar.Item key={"category"} title={"分类"} icon={<img src={require("../asset/tabber/3."+(window.location.pathname === "/category" ? "1" : "0")+".jpg").default} alt=""/>}/>
                    <TabBar.Item key={"shoppingcar"} title={"购物车"} icon={<img src={require("../asset/tabber/2."+(window.location.pathname === "/shoppingcar" ? "1" : "0")+".jpg").default} alt=""/>}/>
                    <TabBar.Item key={"mine"} title={"我的"} icon={<img src={require("../asset/tabber/1."+(window.location.pathname === "/mine" ? "1" : "0")+".jpg").default} alt=""/>}/>
                </TabBar>
            </div>
        )
    }

}

export default App;